class Container{
    constructor(){
        this.getPage();
        // this.islogin();
    }

// 获取数据
 getPage(){
    // 获取问号后面的内容--使用location.search
    // URLSearchParams创建并返回一个新的对象，开头的问号字符会被忽略
    let paramsObj=new URLSearchParams(location.search);
    paramsObj.get('pid');
    let pid=paramsObj.get('pid')
    // console.log(pid);/* 获取到商品对象的id信息 */



    // 根据获取的id渲染页面

    axios.get("http://localhost:8888/goods/item",{id:pid,})
    .then((r)=>{
        localStorage.setItem('goodsid',pid);
            // 把字符串转换成对象
            let data=JSON.parse(r).info;
            // console.log(data);
            let html=`

            <div class="plus5_no3">
        <div class="plus5_no3_img">
            <img src="${data.img_big_logo}" style="display: block" alt="">
            <img src="${data.img_big_logo}" style="display: none" alt="">
            <img src="${data.img_big_logo}" style="display: none" alt="">
            <img src="${data.img_big_logo}" style="display: none" alt="">
        </div>
        <div class="plus5_no3_right">
            <h1>${data.title}</h1>
            <p class="plus5_no3_right_p2"><span class="plus5_no3_right_span2">「64GB立减200元」</span>全面屏 / 4000mAh大电量 / 前置柔光自拍 / 14nm骁龙八核处理器</p>
            <p class="plus5_no3_right_p3">${data.current_price}<span class="plus5_no3_right_span3">${data.price}</span></p>
            <div class="plus5_no3_right_div4">
                <div class="plus5_no3_right_div4_in">
                    <p class="plus5_no3_right_p4">赠品</p><span>原装贴膜</span>
                </div>
                <div class="plus5_no3_right_div4_in">
                    <p class="plus5_no3_right_p4">赠品</p><span>原装贴膜</span>
                </div>
            </div>
            <div class="plus5_no3_right_div5">
                    <p >北京 北京市 东城区 永定门外街道 <span class="plus5_no3_right_div5_span"><a class="plus5_no3_right_div5_span" href="">修改</a><br>有现货</span></p>
            </div>
            <div class="plus5_no3_right_div6">选择版本</div>
            <div class="plus5_no3_right_div7">
                <li class="plus5_no3_right_div7_in plus5_no3_right_div7_in_hover">
                    <span class="plus5_no3_right_div7_span0 ">3GB+32GB</span>
                    <span class="plus5_no3_right_div7_span " >999元</span>
                </li>
                <li class="plus5_no3_right_div7_in plus5_no3_float">
                    <span class="plus5_no3_right_div7_span0 ">4GB+64GB</span>
                    <span class="plus5_no3_right_div7_span " >1299元</span>
                </li>
            </div>
            <div class="plus5_no3_right_div6">选择颜色</div>
            <div class="plus5_no3_right_div9">
                <li class="plus5_no3_right_div7_in plus5_no3_right_div7_in_hover "><img src="img/plus5_phone_01.png" alt=""><span>金色</span></li>
                <li class="plus5_no3_right_div7_in plus5_no3_float"><img src="img/plus5_phone_02.png" alt=""><span>黑色</span></li>
                <li class="plus5_no3_right_div7_in"><img src="img/plus5_phone_03.png" alt=""><span>玫瑰金</span></li>
                <li class="plus5_no3_right_div7_in plus5_no3_float"><img src="img/plus5_phone_04.png" alt=""><span>浅蓝色</span></li>
            </div>
            <div class="plus5_no3_right_div10">
                <p class="plus5_no3_right_div10_p1">红米5 Plus <span class="plus5_no3_right_div10_span0">4GB+64GB</span> <span class="plus5_no3_right_div10_span1"></span><span class="plus5_no3_right_div10_span2">金色</span></p><span class="plus5_no3_right_span10">999元</span>
                <p class="plus5_no3_right_div10_p2">总计 ：999元</p>

            </div>

            <a href="#none"><div class="plus5_no3_right_div11" onclick="Container.addCart(${data.goods_id})">加入购物车</div></a>

            <div class="plus5_no3_right_div12">
                <div class="plus5_no3_right_div12_y">√</div>
                <div class="plus5_no3_right_div12_z">七天无理由退货</div>
                <div class="plus5_no3_right_div12_y">√</div>
                <div class="plus5_no3_right_div12_z">15天质量问题换货</div>
                <div class="plus5_no3_right_div12_y">√</div>
                <div class="plus5_no3_right_div12_z">360天保障</div>
            </div>
            <a href="javascript:void (0);"></a>

        </div>
    </div>





`;
// console.log(html);
document.querySelector('.plus5_no3').innerHTML=html;

});
 }
//  点击加入购物车进行跳转的静态方法
 static addCart(goodsId){
    console.log(goodsId);

    // 判断是否有用户id
    let id=localStorage.getItem('user_id');
    // 如果不存在就代表没有登录，跳转到登录页面
    if(!id)location.href='../html/login.html';
        // console.log(id)
    axios.post('http://localhost:8888/cart/add',{id,goodsId})
         .then((res)=>{
            console.log(res);
            res=JSON.parse(res);

            if(res.code==1){
                layer.open({
                    title: '加入购物车成功'
                    ,content: '是否去购物车页面'
                    ,btn: ['是', '留在当前页'] 
                    ,yes: function(index, layero){
                        console.log(111)
                        //按钮【按钮一】的回调
                        location.href="../html/cartlist.html"
                      }
                  });
            }
    })
 }
 
            // //判断是否登录
            // islogin(){
            //     let id=localStorage.getItem('user_id');
            //     if(!id)location.href='./login.html?returnUrl=./login.html'
            // }
}
new Container();